<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <el-container>
      <el-header height="60px">
        <div class="logo">
          <img
            src="http://likede2-admin.itheima.net/img/logo.3673fab5.png"
            alt=""
          />
        </div>
        <div class="info">
          <img src="https://lkd2-java.itheima.net/image/avatar.png" alt="" />
          <span style="font-size: 16px; color: #fff"
            >欢迎您,{{ userName }}</span
          >
          <div>
            <el-tooltip
              class="item"
              effect="dark"
              content="退出登录"
              placement="bottom"
            >
              <span
                style="font-size: 16px; color: #fff; marginleft: 30px"
                class="logout"
                @click="logout"
                >退出<span class="iconfont icon-xiajiantou"></span
              ></span>
            </el-tooltip>
          </div>
        </div>
      </el-header>
      <el-container style="display: flex">
        <el-aside style="flex: 1" >
          <!--aside  -->
          <el-row class="tac">
            <el-col :span="24">
              <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                :router="true" @open="handleOpen"
                @close="handleClose"
              >
                <el-menu-item index="/index">
                  <i class="iconfont icon-shouye"></i>
                  <span slot="title"
                    >帝可得&nbsp;&nbsp;</span
                  >
                </el-menu-item>
                <el-submenu index="2">
                  <template slot="title">
                    <i class="iconfont icon-dingdan1"></i>
                    <span>工单管理</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="/orders"
                      >运营工单</el-menu-item
                    >
                    <el-menu-item index="/repair">运维工单</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
                <el-submenu index="3">
                  <template slot="title">
                    <i class="iconfont icon-dingwei"></i>
                    <span>点位管理</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="/quyu">区域管理</el-menu-item>
                    <el-menu-item index="/dianwei">点位管理</el-menu-item>
                    <el-menu-item index="/hezuoshang">合作商管理</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
                <el-submenu index="4">
                  <template slot="title">
                    <i class="iconfont icon-shebei"></i>
                    <span>设备管理</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="/shebeiguanli">设备管理</el-menu-item>
                    <el-menu-item index="/sbzt">设备状态</el-menu-item>
                    <el-menu-item index="/sblx">设备类型管理</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
                <el-submenu index="5">
                  <template slot="title">
                    <i class="iconfont icon-renyuanguanli"></i>
                    <span>人管管理</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item
                      index='/ryperlist'

                      >人员列表</el-menu-item
                    >
                    <el-menu-item index='/rytongji'
                      >人效统计</el-menu-item
                    >
                    <el-menu-item
                      index='/ryworklist'

                      >工作量列表</el-menu-item
                    >
                  </el-menu-item-group>
                </el-submenu>
                <el-submenu index="6">
                  <template slot="title">
                    <i class="iconfont icon-pintu"></i>
                    <span>商品管理</span>
                  </template>
                  <el-menu-item-group>
                    <el-menu-item index="/goodstype">商品类型</el-menu-item>
                    <el-menu-item index="/goodsmanage">商品管理</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
                <el-menu-item index="/celue">
                  <i class="iconfont icon-deng"></i>
                  <span slot="title">策略管理</span>
                </el-menu-item>
                <el-menu-item index="/dingdan">
                  <i class="iconfont icon-dingdan1"></i>
                  <span slot="title">订单管理</span>
                </el-menu-item>
                <el-menu-item index="rectotal">
                  <i class="iconfont icon-zhangdan"></i>
                  <span slot="title">对账统计</span>
                </el-menu-item>
              </el-menu>
            </el-col>
          </el-row>
          <!--aside-->
        </el-aside>
        <div style="flex: 8; width: 1256px">
          <router-view class="main"></router-view>
        </div>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { getuserId } from '@/utils/localStorage'
import { userinfo } from '@/api/login'
// import Index from '@/views/layout/index'
export default {
  // components:{
  //   Index
  // },
  async created () {
    const { data } = await userinfo(getuserId())
    console.log(data.userName)
    this.userName = data.userName
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    },
    logout () {
      console.log('退出登录')
      this.$router.push('/login')
    }
  },
  data () {
    return {
      userName: ''
    }
  }
}
</script>

<style lang='less' scoped>
.tac{
  width: 175px;
}
.el-header{
  background-image: url();
  display: flex;
  position: fixed;
  top: 0;
  z-index: 100;
  width: 100%;
  > .info {
    display: flex;
    align-items: center;
    position: absolute;
    right: 30px;
    img {
      width: 35px;
      height: 35px;
    }
    .logout:hover {
      cursor: pointer;
    }
  }
  > .logo {
    position: absolute;
    left: 20px;
    // top: 10px;-*/=0-     width: 90px;
    img {
      width: 90px;
    }
  }
}
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-aside::-webkit-scrollbar {
  width: 0 !important;
}
.el-aside {
  > * {
    margin-left: -20px;
  }
  // position: fixed;
  // left:0;
    max-width: 175px;
  // min-width: 175px;
  padding-top: 65px;
  background-color: #fff;
  color: #333;
  text-align: center;
  line-height: 200px;
  .el-submenu__title {
    width: 100%;
  }
  > .el-menu-item {
    margin-left: -40px;
    font-size: 14px;
  }
  > .el-submenu {
    margin-left: -40px;
    font-size: 14px;
  }
  .iconfont {
    font-size: 20px;
    font-weight: 600;
    margin-right: 10px;
  }
}
body > .el-container {
  position: relative;
  margin-bottom: 40px;
}
</style>
